<template>
<div class="category">
  <van-nav-bar title="分类" @click-right="onClickRight">
    <van-icon name="search" slot="right" />
  </van-nav-bar>
  <div class="category-tabs">
    <van-badge-group :active-key="activeKey">
      <van-badge :title="tab.name" @click="onTabs(index,tab.id)" v-for="(tab,index) in categorys" :key="index" />
    </van-badge-group>
  </div>
  <div class="category-content">
    <div class="wrap">
      <router-link :to="{ name: 'proDetail', query: {proId: p.proId} }" class="pro" v-for="(p,index) in categoryProList" :key="index">
        <img v-lazy="'http://wlsqbucket.img-cn-shenzhen.aliyuncs.com/'+p.pic" />
        <span>{{p.name}}</span>
        <b>{{p.cash}}</b>
      </router-link>
    </div>
  </div>
</div>
</template>
<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
export default {
  data() {
    return {
      activeKey: 0
    };
  },
  computed: {
    ...mapGetters([
      'categorys',
      'categoryProList'
    ])
  },
  created() {
    this.getCategorys()
    this.getProList({
      categoryId: '0'
    })
  },
  methods: {
    ...mapActions([
      'getCategorys',
      'getProList'
    ]),
    onTabs(key, categoryId) {
      this.activeKey = key
      this.getProList({
        categoryId: categoryId
      })
    },
    onClickRight() {
      this.$router.push({
        path: '/search'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../assets/styles/common.scss';
.van-badge {
    background-color: #fff;
}
.category {
    overflow-y: hidden;
    height: 100vh;
    &-tabs {
        float: left;
        overflow-y: auto;
        height: 85vh;
        // width: 105px;
    }
    &-content {
        float: left;
        width: calc(100% - 105px);
        background: #f2f2f2;
        padding: px2rem(5px) px2rem(10px) 0;
        box-sizing: border-box;
        overflow-y: auto;
        .wrap {
            display: flex;
            flex-flow: row wrap;
            align-content: flex-start;
            justify-content: space-between;
            width: 100%;
            height: 85vh;
            > .pro {
                width: 49%;
                padding: px2rem(8px);
                box-sizing: border-box;
                // height: px2rem(300px);
                background-color: #fff;
                margin: px2rem(5px) 0;
                border-radius: px2rem(5px);
                -moz-box-shadow:0px 1px 1px #c2c2c2;
                -webkit-box-shadow:0px 1px 1px #c2c2c2;
                box-shadow:0px 1px 1px #c2c2c2;
                img {
                    width: 100%;
                }
                span {
                    @include font-dpr(14px);
                    color: black;
                    display: block;
                    height: px2rem(40px);
                    line-height: px2rem(40px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                b {
                    color: red;
                    @include font-dpr(12px);
                    display: block;
                    overflow: hidden;
                    height: px2rem(30px);
                    line-height: px2rem(30px);
                }
            }

        }
    }
}
</style>
